<!-- 运费模板添加&修改 -->
<template>
  <el-dialog
    :title="showTitle"
    :visible="freightAddshowDialog"
    width="600px"
    @close="close"
  >
    <div class="addkuang">
      <el-form
        ref="formManage"
        :model="addManage"
        :rules="rules"
      >
        <el-form-item
          prop="templateType"
          label="模板类型"
        >
          <el-select
            v-model="addManage.templateType"
            placeholder="请选择"
            style="width: 350px;"
            @change="showCity"
          >
            <el-option
              v-for="item in templateTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="transportType"
          label="运送类型"
        >
          <el-select
            v-model="addManage.transportType"
            placeholder="请选择"
            style="width: 350px;"
          >
            <el-option
              v-for="item in transportTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市">
          <span v-if="showCitys">全国</span>

          <el-checkbox-group
            v-else
            v-model="addManage.associatedCityList"
          >
            <el-checkbox
              v-for="city in cities"
              :key="city.value"
              :label="city.value"
              :value="city.value"
            >{{ city.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          prop="firstWeight"
          label="首重价格"
        >
          <el-input
            v-model="addManage.firstWeight"
            placeholder="请输入首重价格"
            style="width: 350px;"
          ></el-input>
          <span class="shouzhong">元</span>
        </el-form-item>
        <el-form-item
          prop="continuousWeight"
          label="续重价格"
        >
          <el-input
            v-model="addManage.continuousWeight"
            placeholder="请输入续重价格"
            style="width: 350px;"
          ></el-input>
          <span class="shouzhong">元</span>
        </el-form-item>
        <el-form-item
          prop="lightThrowingCoefficient"
          label="轻抛系数"
        >
          <el-input
            v-model="addManage.lightThrowingCoefficient"
            placeholder="请输入轻抛系数"
            style="width: 350px;"
          ></el-input>
        </el-form-item>
        <el-button
          style="margin-left: 160px;"
          type="primary"
          @click="addFreightManage"
        >确认</el-button>
        <el-button @click="close">取消</el-button>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import { freightManageOperate, freightManageList } from '@/api/transit'
export default {
  props: {
    // 弹出框的变量
    freightAddshowDialog: {
      type: Boolean,
      default: false
    },
    // 编辑按钮回显的数据
    editManage: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // 表单绑定的数据
      addManage: {
        templateType: null, // 模板类型
        transportType: null, // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: null, // 首重价格
        continuousWeight: null, // 续重价格
        lightThrowingCoefficient: null// 轻抛系数
      },
      // 表单的校验
      rules: {
        templateType: [{ required: true, message: '模板类型不能为空', trigger: 'blur' },
          {
            trigger: 'change',
            validator: async(rule, value, callback) => {
              const res = await freightManageList()
              // 编辑按钮打开的时候排除自身的选项
              if (this.addManage.id) {
                res.data = res.data.filter(item => item.id !== this.addManage.id)
              }
              // console.log(result)
              // 列表中已经有的就不能再创建
              if (res.data.some((item) => item.templateType === value)) {
                callback(new Error('已有该模板'))
              } else {
                callback()
              }
            }
          }
        ],
        transportType: [{ required: true, message: '运送类型不能为空', trigger: 'blur' }],
        firstWeight: [{ required: true, message: '首重价格不能为空', trigger: 'blur' }],
        continuousWeight: [{ required: true, message: '续重价格不能为空', trigger: 'blur' }],
        lightThrowingCoefficient: [{ required: true, message: '轻抛系数不能为空', trigger: 'blur' }]
      },
      // 模板类型列表
      templateTypeList: [{
        value: 1,
        label: '同城寄'
      }, {
        value: 2,
        label: '省内寄'
      }, {
        value: 3,
        label: '经济区互寄'
      }, {
        value: 4,
        label: '跨省'
      }],
      // 运送类型列表
      transportTypeList: [{
        value: 1,
        label: '普快'
      }, {
        value: 2,
        label: '特快'
      }],
      // 关联城市勾选框
      cities: [{
        label: '京津冀',
        value: '2'
      },
      {
        label: '江浙沪',
        value: '3'
      },
      {
        label: '川渝',
        value: '4'
      }, {
        label: '黑吉辽',
        value: '5'
      }
      ],
      showCitys: true// 为true的时候关联城市显示全国
    }
  },
  computed: {
    showTitle() {
      return this.addManage.id ? '编辑模板' : '新增模板'
    }
  },
  methods: {
    // 关闭事件
    close() {
      // this.addManage.associatedCityList = []
      this.$emit('update:freightAddshowDialog', false)
      // 通知父组件弹窗关闭了
      this.$emit('rerender', this.freightAddshowDialog = false)
      // 重置表单
      this.$refs.formManage.resetFields()
      // 点击编辑之后再点击其他的方法弹出框的时候关联城市上显示的第一次弹出框的内容
      // 解决方法：模板类型不等于3的时候清空一下关联城市的内容使他显示全国
      // 第一个解决方法只是解决了点击编辑按钮之后再点击别的的编辑按钮 第二个判断是解决了点击编辑按钮之后再点击添加按钮的问题
      if (this.addManage.templateType !== 3 && this.addManage.templateType === null) {
        this.addManage.associatedCityList = []
        this.showCitys = true
      }
    },
    // 弹出框的确认按钮事件
    addFreightManage() {
      // 表单校验
      this.$refs.formManage.validate(async(isOk) => {
        if (isOk) {
          //  判断是否有id 有id就是编辑
          if (this.addManage.id) {
            // 判断showCitys为true就是全国所以需要赋值1
            if (this.showCitys) {
              this.addManage.associatedCityList[0] = '1'
              // 调用编辑接口传入表单的数据
              await freightManageOperate(this.addManage)
              this.$message.success('编辑成功')
              this.close()
            } else {
            // 关联城市不是全国的时候执行的东西
              await freightManageOperate(this.addManage)
              this.$message.success('编辑成功')
              this.close()
            }
            // 添加
          } else {
            if (this.showCitys === true) {
              this.addManage.associatedCityList[0] = '1'
              await freightManageOperate(this.addManage)
              this.$message.success('添加成功')
              this.close()
            } else {
              await freightManageOperate(this.addManage)
              this.$message.success('添加成功')
              this.close()
            }
          }
          // 清空表单
          this.$refs.formManage.resetFields()
        }
      })
    },
    showCity(val) {
      if (val === 3) {
        // 显示四个勾选框
        this.showCitys = false
      } else {
        // 显示全国
        this.showCitys = true
      }
    },
    // 点击编辑按钮弹出框弹出要执行的东西
    getFreightManage() {
      // 回显的数据赋值给表单
      this.addManage = this.editManage
      // 点击一个编辑之后回显的数据 关闭之后在点击其他的编辑按钮城市关联的数据回显的还是上次的
      // 解决方法 重新赋一下值
      if (this.addManage.templateType === 3) {
        this.addManage.associatedCityList = this.editManage.associatedCityList
        this.showCitys = false
      }
      if (this.addManage.templateType !== 3) {
        this.showCitys = true
      }
    }
  }
}
</script>
<style lang="scss">
.addkuang{
  padding-left: 50px;
  .shouzhong{
  font-size: 16px;
  font-weight: 700;
  z-index:999;
  position: relative;
			top: 0px;
    left: -35px;
  }

}
.el-button--primary{
        background-color: rgb(225, 85, 54);
    border-color: rgb(225, 85, 54);
      }
</style>
